<!-- 创建文章 Markdown 富文本编辑 -->
<template>
    <div class="created-articel">
      <div class="title">
        <el-input placeholder="请输入文章的标题" v-model="title"></el-input>
        <el-input placeholder="请输入文章的简介"
        v-model="summary"
         :autosize="{ minRows: 2, maxRows: 4 }"
    type="textarea"
        ></el-input>
      <el-form class="form">
         <el-form-item label="文章分类">
            <el-radio-group v-model="category_id" @change="change">
              <el-radio
                :disabled="!item.status"
                :label="item.id"
                v-for="item in categories"
                :key="item.id"
              >{{item.name}}</el-radio>
            </el-radio-group>
        </el-form-item>
      </el-form>
      </div>
    <!-- tabbar切换 -->
    <el-tabs v-model="activeName" class="demo-tabs" 
    @tab-click="handleClick">

    <el-tab-pane label="markdown" name="1">
        <!--markdown  -->
        <div id="editor"></div>
        <el-button class="btn-submit" @click="submitArticel" type="primary">提交</el-button>

    </el-tab-pane>
    <!-- 富文本 -->
    <el-tab-pane label="富文本" name="2">
       <div id="editorWang"></div>
 <el-button class="btn-submit" @click="submitArticel" type="primary">提交</el-button>
    </el-tab-pane>
    
  </el-tabs>
      

    </div>
</template>

<script setup>
import {ref,onMounted} from 'vue'
import Editor from '@toast-ui/editor';
import E from 'wangeditor'
import { addArtical} from "@/api/sysArtical"
import { getCategoricallist } from '@/api/sysCategorical'
import { ElMessage    } from 'element-plus'
 // 激活项
const activeName = ref('1')
// 标题
const title = ref("")
const summary = ref("")
const categories = ref("")
 let category_id = ref (1)
 let editor ;
 let editorWang ;
 
const handleClick = (tag) => {
  activeName.value=tag.props.name
}
 // 获取文章类型
const getCategoricalList = async () => {
  const {
    data: { rows },
  } = await getCategoricallist()
  categories.value = rows
}
getCategoricalList()

const change = (val) => {
  categories.value.forEach((item) => {
    if (item.name == val) {
       category_id.value = item.id
      return
    }
  })
 
}

// 初始化Markdown
const initMarkdown=()=>{
 editor = new Editor({
  el: document.querySelector('#editor'),
  height: '500px',
  initialEditType: 'markdown',
  initialValue: '',
  previewStyle: 'vertical'
});

editorWang = new E('#editorWang')
editorWang.config.showMenuTooltips= true
editorWang.config.menuTooltipPosition= 'down'
editorWang.create()
 
}

// 提交编辑哈的Markdown文本
const submitArticel = async()=>{
  const content = activeName.value==1? editor.getHTML():editorWang.txt.html()
  const data = await addArtical({
    content,
    title:title.value,
    category_id:category_id.value,
    summary:summary.value
  })
  if(data.code == 200){
    ElMessage.success(data.msg)
    // 重置
    editor.reset()
    editorWang.txt.html('')
    title.value=''
    summary.value=''
  }

}
// 初始化 要在daom渲染完毕后
onMounted(()=>{initMarkdown()})


// 富文本



</script>
<style lang='less' scoped>
.created-articel{
  padding: 20px;
}
.btn-submit{
  margin: 10px 0;
  float: right ;
}
.form{
  margin: 10px 0;
}
 
</style>